        <form class="form-horizontal" id="add_role_form">
        <div class="ibox float-e-margins">
            <div class="ibox-title" style="border: none;">
                <h5 style="color: #00afef"><i>Roles</i></h5>
                <div class="ibox-tools" id="add_btn">
                    <i id="loading_role_btn" style="color: gray; display: none;" class="fa fa-spinner fa-spin fa-lg"></i>&nbsp;
                    <button class="btn btn-primary btn-sm save-btn-tab" id="add_role_btn">Save</button>
                    <a id="add_cancel" class="btn-outline btn btn-info btn-sm add_cancel cancel-btn-tab" >Cancel</a>
                </div>
            </div>
            <div class="ibox-content">

                    <div class="form-group">
                        <label class="col-lg-4 control-label">Company</label>
                        <div class="col-lg-5">
                            <input readonly type="text" class="form-control" value="<?php echo $this->session->userdata('comp_name'); ?>" name="role_company">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">Name</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="role_name" aria-required="true" aria-invalid="true">
                            <label style="display: none;" id="role_name-error" class="error" for="role_name">Already exist</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">Description</label>
                        <div class="col-lg-5">
                            <input type="text" class="form-control" name="role_description">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-4 control-label">Enable</label>
                        <div class="col-lg-1">
                            <input checked type="checkbox" class="i-checks" name="role_status" value="ok">
                        </div>
                    </div>
                </form>
            </div>
            <div class="ibox-content">
                <button type="button" class="btn btn-primary" id="role_dtl_modal" >New Detail</button>
                <table class="dataTables1 table table-bordered table-compact">
                    <thead>
                        <tr>
                            <th>Form</th>
                            <th>Module</th>
                            <th style="border-right: none;">Create</th>
                            <th style="border-right: none; border-left: none;">Update</th>
                            <th style="border-right: none; border-left: none;">Delete</th>
                            <th style="border-left: none;">ReadOnly</th>
                            <th>Enabled</th>
                        </tr>
                    </thead>
                    <tbody id="role-dtl-tbl">

                    </tbody>
                </table>
            </div>
        </div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });

        $("#add_role_form").validate({
             rules: {
                 role_status: {
                    required: true
                 },
                 role_name: {
                    required : true
                 }
             },
             submitHandler: function(form){
                $.ajax({
                    type: "POST",
                    url: "<?php echo base_url($this->session->userdata('forajax') . '/addRole'); ?>",
                    data: $('#add_role_form').serialize(),
                    dataType: 'json',
                    success: function(e){
                        $('#loading_role_btn').hide();
                        console.log(e);
                        if(e[0].error == 1){
                            notifymsg('danger','<b>Error</b>: ' + e[0].msg);
                            $('input[name=role_name]').addClass('error');
                            $('#role_name-error').show();
                            $('#add_role_btn').removeAttr('disabled');
                        }else{
                            $('#role_name-error').hide();
                            notifymsg('success','<b>Success</b>: Data Saved');
                            localStorage.role_id = e[0].id;
                            $('#role-dtl-form #role_id').val(e[0].id);
                        }
                    },
                    beforeSend: function(){
                        $('#loading_role_btn').show();
                        $('#add_role_btn').attr('disabled',true);
                    }
                });
             }
        });
        $('#add_cancel').click(function(){
            console.log(swal);
                swal({
                    title: "Are you sure?",
                    text: "You want to leave this page?",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Yes, Please.",
                    cancelButtonText: "No, I'll Stay",
                    closeOnConfirm: true,
                    closeOnCancel: true },
                function (isConfirm) {
                    if (isConfirm) {
                        $('#tab-list-2 a:first').tab('show');
                        $('#add').remove();
                        $('#add-link').remove();
                        $('#count_add').val('0');
                    } else {
                    }
                });
             console.log(swal());
        });
    });
</script>